<template>
  <div class="Maintenance">
    <!-- header -->
    <div class="header">
      <h2>还车登记</h2>
      <div class="buttons">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">新增</el-button>
        <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </div>
    <!-- header -->
    <!-- table -->
    <el-table :data="
      tableData.filter(
        (data) =>
          !search || data.apid.toLowerCase().includes(search.toLowerCase())
      )
    " style="width: 100%" height="650" border>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="id" label="id" width="165" sortable>
      </el-table-column>
      <el-table-column prop="bcid" label="还车申请单号" width="165" sortable>
      </el-table-column>
      <el-table-column prop="driver" label="还车人" width="165" sortable>
      </el-table-column>
      <el-table-column prop="bctype" label="申请车型" width="165">
      </el-table-column>
      <el-table-column prop="bctime" label="用车时间" width="165">
      </el-table-column>
      <el-table-column prop="vehiclestatus" label="车辆状态" width="165">
      </el-table-column>
      <el-table-column fixed="right" width="165">
        <template slot="header" slot-scope="">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看
          </el-button>
          <el-button type="text" size="small" @click="change(scope.row)">编辑</el-button>
          <el-button type="text" size="small" style="color: red" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination background layout="prev, pager, next" @current-change="current_change" :total="blockall">
      </el-pagination>
    </div>

    <!-- 分页 -->
    <!-- table -->
    <!-- 详情 -->
    <el-drawer title="用车申请详情" :visible.sync="drawer" :direction="direction" :before-close="cancel" :size="500">
      <div class="details">
        <div class="details-main">
          <!-- ele ui 描述列表 -->

          <!-- 表单 -->
          <el-form label-position="top" label-width="80px">
            <el-form-item label="id">
              {{ details.id }}
            </el-form-item>
            <el-form-item label="还车人">
              {{ details.driver }}
            </el-form-item>
            <el-form-item label="还车登记单号">
              {{ details.bcid }}
            </el-form-item>
            <el-form-item label="申请车型">
              {{ details.bctype }}
            </el-form-item>
            <el-form-item label="还车时间">
              {{ details.bctime }}
            </el-form-item>
            <el-form-item label="车辆状态">
              {{ details.vehiclestatus }}
            </el-form-item>

          </el-form>
          <!-- 表单 -->
        </div>
        <div class="drawer__footer">
          <el-button type="primary" @click="cancel"> 确 定 </el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 详情 -->
    <!-- 添加 -->
    <el-dialog title="新增还车登记表" :visible.sync="dialogAddVisible">
      <div class="add">
        <el-form ref="addform" :model="addform" label-width="80px" :rules="rules">
          <el-form-item label="还车人" prop="driver">
            <el-input v-model="addform.driver" placeholder="请输入内容"></el-input>
          </el-form-item>
          <!-- <el-form-item label="还车单号" prop="bcid">
            <el-input v-model="addform.bcid" placeholder="请输入内容"></el-input>
          </el-form-item> -->
          <el-form-item label="车型" prop="bctype">
            <el-select v-model="addform.bctype" placeholder="请选择">
              <el-option label="货车" value="货车"></el-option>
              <el-option label="客车" value="客车"></el-option>
              <el-option label="小轿车" value="小轿车"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="还车时间" prop="bctime" required>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="addform.bctime" style="width: 100%"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="车辆状态" prop="vehiclestatus">
            <el-input type="text" v-model="addform.vehiclestatus"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAddSubmit(addform)">提交</el-button>
            <el-button @click="dialogAddVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 添加 -->
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogChangeVisible">
      <div class="change">
        <el-form ref="details" :model="details" label-width="80px">
          <el-form-item label="用车申请单号" label-width="auto">
            {{ details.bcid }}
          </el-form-item>
          <el-form-item label="用车申请人" label-width="auto">
            {{ details.driver }}
          </el-form-item>
          <el-form-item label="申请车型">
            <el-select v-model="details.bctype" placeholder="请选择">
              <el-option label="货车" value="货车"></el-option>
              <el-option label="客车" value="客车"></el-option>
              <el-option label="小轿车" value="小轿车"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="details.bctime" style="width: 100%"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="车辆状态">
            <el-input type="textarea" v-model="details.vehiclestatus"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onChangeSubmit(details)">提交</el-button>
            <el-button @click="dialogChangeVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 编辑 -->
  </div>
</template>

<script>
import {
  // ycAllList,
  bcList,
  changebc,
  addbc,
  delbc,
  kanbc,
} from "../../apis/srj/link.js";

export default {
  mounted() {
    //获取后台
    bcList().then((ok) => {
      console.log(ok);
      this.tableData = ok.data.data.records;
      this.blockall = ok.data.data.total;
    });
    //获取json
    // 总页数
    // ycAllList().then((ok) => {
    //   console.log(ok.data.date.length);
    //   this.blockall = ok.data.data.length;
    // });
    //分页查询
    // ycList().then((ok) => {
    //   console.log(ok);

    //   this.tableData = ok.data.data;
    //    this.blockall = ok.data.data.length;
    // });

    //获取后台
    // javawblist().then((ok) => {
    //   console.log(ok);
    // });
  },
  methods: {
    //页码
    current_change(i) {
      console.log(i);
      this.index = i;
      //分页查询
      bcList(i).then((ok) => {
        console.log(ok);
        this.tableData = ok.data.data.records;
        this.blockall = ok.data.data.total;
      });
    },
    //编辑
    change(row) {
      this.details = row;
      this.dialogChangeVisible = true;
    },
    //编辑提交
    onChangeSubmit(obj) {
      console.log("新增", obj);
      if (this.dialogChangeVisible) {
        changebc(obj).then((ok) => {
          console.log(ok);
          if (ok.status === 200) {
            this.dialogChangeVisible = false;
            bcList(this.index).then((ok) => {
              console.log(ok);
              this.tableData = ok.data.data.records;
              this.blockall = ok.data.data.total;
            });
          }
        });
      }
    },
    //新增按钮
    add() {
      this.dialogAddVisible = true;
    },
    //随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //随机id
    randomID() {
      let reID = "";
      for (let i = 0; i < 6; i++) {
        reID += this.randomNum(0, 9);
      }
      return reID / 1;
    },
    //新增提交
    onAddSubmit(obj) {
      console.log(obj);
      this.$refs["addform"].validate((valid) => {
        if (valid) {
          // alert('submit!');
          // obj.apid = this.randomID();
          addbc(obj).then((ok) => {
            console.log(ok);
            if (ok.data.code === 200) {
              this.dialogAddVisible = false;
              //总页数
              // ycAllList().then((ok) => {
              //   this.blockall = ok.data.date.length;
              // });
              // //当前页
              bcList(this.index).then((ok) => {
                this.tableData = ok.data.data.records;
                this.blockall = ok.data.data.total;
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //删除
    del(row) {
      console.log(row.id);
      delbc(row.id).then((ok) => {
        // console.log(ok);
        if (ok.data.code === 200) {
          bcList(this.index).then((ok) => {
            console.log(ok);
            if (ok.data.data.records.length == 0) {
              console.log(this.index--);
              bcList(this.index).then((ok) => {
                this.tableData = ok.data.data.records;
                this.blockall = ok.data.data.total;
              });
            } else {
              bcList(this.index).then((ok) => {
                this.tableData = ok.data.data.records;
                this.blockall = ok.data.data.total;
              });
            }
          });
        }
        //总页数
        // ycAllList().then((ok) => {
        //   this.blockall = ok.data.date.length;
        // });
        //当前页
      });
    },
    //详情取消
    cancel() {
      this.drawer = false;
    },
    // 关闭详情抽屉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    //查看
    handleClick(row) {
      console.log(row);
      // this.drawer = !this.drawer;
      // this.details = row;
      kanbc(row.bcid).then((ok) => {
        // console.log(ok);
        if (ok.data.code === 200) {
          this.drawer = !this.drawer;
          this.details = ok.data.data;
        }
      });
    },
  },
  data() {
    return {
      //新增校验
      rules: {
        driver: [
          { required: true, message: '输入不能为空', trigger: 'blur' },
        ],
        bctype: [
          {  required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        bctime: [
          { required: true, message: '请输入用车时间', trigger: 'blur' },
        ],
        vehiclestatus: [
          { type: 'string', required: true, message: '请输入', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '输入不能为空', trigger: 'blur' },
        ],
      },
      //当前页码
      index: 1,
      //分页总数
      blockall: 1,
      //添加表单
      input: "",
      hh: "",
      // 编辑对话框
      dialogChangeVisible: false,
      //添加对话框
      dialogAddVisible: false,
      //抽屉
      direction: "rtl",
      drawer: false,
      //搜索
      search: "",
      //列表
      tableData: [],
      //详情
      details: {},
      //添加表单
      addform: {
        id: "",
        driver: "",
        bcid: "",
        bctype: "",
        bctime: "",
        vehiclestatus: "",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.Maintenance {
  // height: 100%;
  // width: auto;
  // min-width: 444px;
  min-height: 800px;
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  position: relative;

  //头部
  .header {
    h2 {
      margin: 5px 0;
      font-size: 18px;
      font-weight: 400;
    }

    .buttons {
      margin: 20px 0;
    }
  }

  //详情
  .details {
    height: 100%;
    display: flex;
    flex-direction: column;

    .details-main {
      padding: 20px;
      flex: 1;
    }

    .drawer__footer {
      display: flex;
      justify-content: center;
    }
  }

  //分页
  .block {
    margin: 10px 0;
  }
}
</style>